<template>
    <div class="home">
        <div class="my-title">
            <div class="logo1"></div>

            <div class="title1">
                <!-- <div class="logo2"></div> -->
                <div class="title1-text">乐清市</div>
            </div>
            <div class="title2">公正透明·服务民生</div>
        </div>
        <!-- <div class="title2">政府搭台 · 公正透明 · 便捷高效 · 服务民生</div> -->
        <!-- <div class="title2">尊重生命 · 服务生命 · 公正透明</div> -->
        <main>
            <div class="box" @click="router.push('/satisfactionSurveyCheck')">
                <div class="box-1">
                    <div class="i-material-symbols:account-child box-1-icon"></div>
                </div>
                <div class="box-text">乐清市殡葬系统廉洁从政举报平台</div>
            </div>
            <!-- <div class="box" @click="router.push('/')">
                <div class="box-1">
                    <div class="i-material-symbols:child-care box-1-icon"></div>
                </div>
                <div class="box-text"></div>
            </div> -->
            <!-- <div class="box" @click="router.push('/')">
                <div class="box-1">
                    <div class="i-material-symbols:child-friendly box-1-icon"></div>
                </div>
                <div class="box-text"></div>
            </div> -->
        </main>
        <div class="footer">
            <!-- <div class="footer-1">
                  <span>版权所有：泰州市民政局</span>
                  <span>主办单位：泰州市民政局</span>
              </div> -->
            <div class="footer-2">
                <div>
                    <div>苏ICP备05003226号-1</div>
                    <!-- <div>版权所有：泰州市民政局</div> -->
                    <div>主办单位：乐清市民政局</div>
                </div>
                <!-- <span>政府网站标识码：3212000035</span>
                  <span><img src="@/assets/public-security.png" />苏公网安备 32120202010302号</span> -->
                <!-- <img style="margin:0;border:0;cursor: pointer;"  src="https://zfwzgl.www.gov.cn/exposure/images/jiucuo.png?v=3212000035" @click="go('https://zfwzgl.www.gov.cn/exposure/jiucuo.html?site_code=3212000035&url=http%3A%2F%2Fmzj.taizhou.gov.cn%2F')"> -->
                <a
                    href="https://zfwzgl.www.gov.cn/exposure/jiucuo.html?site_code=3212000035&url=http%3A%2F%2Fmzj.taizhou.gov.cn%2F"
                    target="blank"
                >
                    <img
                        style="margin: 0; border: 0; cursor: pointer"
                        src="https://zfwzgl.www.gov.cn/exposure/images/jiucuo.png?v=3212000035"
                    />
                </a>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { useStore } from '@/store';
    const route = useRoute();
    const router = useRouter();
    const store = useStore();

    const isCollapse: Ref<boolean> = ref(false); //折叠面板
    const logoImage = new URL('@/assets/img/logo.png', import.meta.url).href;
    // const logoImage: Raw<any[]> = markRaw([new URL('@/assets/img/avatar/avatar.png', import.meta.url).href])
</script>
<style lang="scss" scoped>
    .home {
        // @include padding-global;
        width: 100vw;
        height: 100vh;
        // padding: 6px 15px;
        box-sizing: border-box;
        // background-image: linear-gradient(#9ab4fd, #ffffff);
        background-image: url('@/assets/img/bg/bg12.png');
        // background-position: 40% 0;
        // background-size: cover;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        overflow: scroll;
        z-index: -10;
    }
    .my-title::before {
        content: '';
        width: 350px;
        height: 170px;
        position: absolute;
        top: 0;
        left: 0;
        background: url(@/assets/img/banner/gmjs_bg15.png);
        background-size: 100% 100%;
        opacity: 1;
        z-index: -1;
        box-sizing: border-box;
        border-radius: 10px;
    }
    .my-title {
        z-index: 1;
        position: relative;
        margin: 10px auto;
        width: 350px;
        height: 170px;
        position: relative;

        .title1 {
            width: 350px;
            margin: 0 auto;
            // padding-top: 20px;
            padding-top: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            // font-family: '宋体';
        }
        .logo1 {
            position: absolute;
            left: 10px;
            top: 10px;
            width: 30px;
            height: 30px;
            background: url('@/assets/img/logo.png');
            background-size: 100% 100%;
        }
        .logo2 {
            margin-left: 10px;
            margin-right: 10px;
            width: 26px;
            height: 26px;
            background: url('@/assets/img/logo.png');
            background-size: 100% 100%;
        }
        .title1-text {
            // padding-top: 20px;
            font-size: 24px;
            font-weight: bold;
            // color: rgba(1, 28, 117, 1);
            color: #fff;
            // text-shadow: 0 0 10px #484848;
            text-shadow: 0 1px 2px #000;
            font-family: '宋体';
        }
        .title2 {
            padding-top: 15px;
            font-size: 15px;
            font-weight: 600;
            // color: #5f625a;
            // color: rgb(218, 199, 199);
            color: #fff;
            text-shadow: 0 1px 2px #000;
            letter-spacing: 5px;
            box-sizing: border-box;
            // padding-right: 50px;
        }
    }

    main {
        flex: 1;
        margin: 0 auto;
        padding-top: 60px;
        display: flex;
        // justify-content: space-between;
        align-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        width: 320px;
        .box {
            width: 33.3%;
            // width: 90px;
            // height: 118px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            // font-weight: bold;
            font-size: 14px;
            margin-bottom: 20px;
            box-sizing: border-box;
            padding: 10px;
        }
        .box-text {
            color: #5f625a;
            padding-top: 10px;
        }
        .box-1 {
            width: 62px;
            height: 62px;
            // background: url('@/assets/home/box-17.png');
            // background-position: 50% 50%;
            // background-size: 60% 60%;
            // background-repeat: no-repeat;
            box-sizing: border-box;
            background-color: rgba(63, 151, 255, 1);
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box-1-icon {
            font-size: 30px;
            color: rgb(255, 255, 255);
        }
    }
    .footer {
        color: rgba(1, 39, 89, 1);
        font-size: 13px;
        .footer-1 {
            display: flex;
            justify-content: space-around;
        }
        .footer-2 {
            color: rgb(182, 163, 163);
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            :nth-child(1) {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around;
            }
            // :nth-child(3) {
            //     display: flex;
            //     align-items: center;
            // }
        }
    }
</style>
